<template>
  <div class="couponBox">
    <div class="informationBox">
      <img src="/src/assets/property/information.png" alt/>
      <div class="information-content">
        <div v-for="(item,index) in list[leftIndex].informationInfoList" :key="index">{{ item.title }}</div>
      </div>
    </div>
    <!-- 右侧轮播编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightcoupon">
        <!-- 头部提示区域 -->
        <header class="title">资讯设置</header>
        <div class="editCon">
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-input v-model="list[leftIndex].recentDay" style="width:200px;" @change="recentDay($event)"></el-input>
<!--            <el-select v-model="list[leftIndex].recentDay" placeholder="请选择" style="width:200px;" @change="recentDay($event)">-->
<!--              <el-option-->
<!--                v-for="item in dayOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              />-->
<!--            </el-select>-->
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-input v-model="list[leftIndex].limit" style="width:200px;" @change="recentDay($event)"></el-input>
<!--            <el-select v-model="list[leftIndex].limit" placeholder="请选择" style="width:200px;" @change="limitNumber($event)">-->
<!--              <el-option-->
<!--                v-for="item in selectOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              />-->
<!--            </el-select>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getTenantId} from "@/utils/auth"
  // import {getInformationInfo} from '@/api/user/user' // 数据接口
  export default {
    props: ['list', 'leftIndex'],
    data() {
      return {
        fileList: [],
        keyWord: '',
        couponDialogVisible: false,
        classDialogVisible: false,
        EduxcloudArticleVo: {},
        dayOptions: [{value: '3', label: '最近3天'}, {value: '7', label: '最近7天'}, {value: '15', label: '最近15天'}, {value: '30', label: '最近30天'}],
        selectOptions: [{value: '1', label: '1'}, {value: '2', label: '2'}, {value: '3', label: '3'}, {value: '4', label: '4'}, {value: '5', label: '5'}]
      }
    },

    mounted() {
      this.restaurants = this.loadAll()
    },
    methods: {
      getInformationInfo() {
        this.EduxcloudArticleVo.tenantId = getTenantId();
        this.EduxcloudArticleVo.limit = this.list[this.leftIndex].limit;
        this.EduxcloudArticleVo.day = this.list[this.leftIndex].recentDay;
        getInformationInfo(this.EduxcloudArticleVo).then(response => {
          this.list[this.leftIndex].informationInfoList = response.data.items
        }).catch(() => {
        })
      },
      loadAll() {
        return [
          {'value': '1', 'price': '12', 'content': '资讯内容公告，最新消息最新课程显示优惠特价放松折扣享不停', 'startTime': '2019-03-30', 'endTime': '2019-10-30'},
          {'value': '2', 'price': '12', 'content': '限时促销活动火热进行中，买一送二。', 'startTime': '2019-03-30', 'endTime': '2019-10-30'}
        ]
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results)
        }, 1000 * Math.random())
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(item) {
        if (this.list[this.leftIndex].informationInfo.length > 4) {
          this.$message({
            message: '最多只能添加五个资讯',
            type: 'warning'
          });
          return
        }
        this.list[this.leftIndex].informationInfo.push({
          name: item.value,
          price: item.price,
          content: item.content,
          residue: item.residue,
          gross: item.gross,
          startTime: item.startTime,
          endTime: item.endTime
        });
        console.log(this.list[this.leftIndex].informationInfo)
      },
      // 链接标签删除
      handleTagClose(index) {
        // this.list[this.leftIndex].couponName = ''
        this.list[this.leftIndex].informationInfo.splice(index, 1)
      },
      // 移除链接列表
      removeLink(index) {
        this.list[this.leftIndex].informationInfo.splice(index, 1)
      },
      // 选择课程确认
      courseConfirm() {
        if (this.list[this.leftIndex].informationInfo.length === 0) {
          this.couponDialogVisible = false;
          return
        }
        // this.list[this.leftIndex].couponName = this.couponTableData[0].name
        this.couponDialogVisible = false;
        this.keyWord = ''
      },
      recentDay() {
        this.getInformationInfo()
      },
      limitNumber() {
        this.getInformationInfo()
      }
    }
  }
</script>
<style lang="scss">
  .clearfix:after {
    content: '';
    display: block;
    clear: both;
  }

  .couponBox {
    margin: 10px 0;

    .informationBox {
      display: flex;
      align-items: end;
      padding: 10px;

      img {
        width: 60px;
        height: 25px;
        margin-right: 10px;
      }

      .information-content {
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
        font-size: 14px;

        div {
          margin-top: 7px;
        }
      }
    }

    .image-mask {
      font-weight: 600;
      width: 100%;
      height: 100%;
      background-color: #e1e1e1;
      font-size: 26px;
      color: #919191;
      text-align: center;
      line-height: 194px;
    }

    .couponCard {
      height: 112px;
      overflow: hidden;
      padding: 0 10px;

      .couponCard_body {
        position: relative;
        float: left;
        width: 100%;
        line-height: 1;
        box-sizing: border-box;

        .couponCard_header {
          height: 82px;
          box-sizing: border-box;
          padding: 20px 15px 18px;
          border-top-right-radius: 2px;
          border-top-left-radius: 2px;
          background-color: #ff6969;

          .couponCard_price {
            margin-top: 10px;
            display: inline-block;
            color: #fff;
            font-size: 32px;
            font-weight: 500;
          }

          .couponCard_name {
            position: absolute;
            right: 85px;
            top: 32px;
            line-height: 1.3;
            color: #fff;
            font-size: 10px;

            .text-overflow {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 142px;
            }
          }

          .couponCard_button {
            position: absolute;
            right: 24px;
            top: 32px;
            box-sizing: border-box;
            height: 24px;
            width: 56px;
            line-height: 24px;
            text-align: center;
            font-size: 12px;
            color: #ff5353;
            background-color: #fff;
            border-radius: 4px;
          }
        }

        .couponCard_middle {
          margin-top: -6px;
          margin-bottom: -1px;
          height: 6px;
          background-image: url('../../../../assets/settinyschool/smss.png');
          background-size: 16px 6px;
          background-position-x: 6px;
        }

        .couponCard_bottom {
          padding: 10px;
          background-color: #ff5353;
          color: #fff;
          font-size: 10px;
          border-bottom-right-radius: 2px;
          border-bottom-left-radius: 2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .couponCard_circle——left {
        content: '';
        position: absolute;
        top: 74px;
        left: -5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
      }

      .couponCard_circle——right {
        content: '';
        position: absolute;
        top: 74px;
        right: -5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }

  .editRightcoupon {
    width: 400px;
    position: absolute;
    left: 105%;
    top: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background-color: #fafafa;

    .title {
      font-size: 14px;
      padding-bottom: 15px;
      margin: 5px 0;
      border-bottom: 1px solid #e1e1e1;

      .help-text {
        font-size: 12px;
        color: #616161;
        margin-top: 5px;
      }
    }

    .editCon {
      background-color: #fff;
      padding: 10px;
      border: 1px solid #e1e1e1;
    }
  }
</style>
